<template>
  <div class="person">
    <div class="mine-head">
      <!-- <img src="/imgs/头像.png" /> -->
      <div class="img">
        <van-uploader v-model="img" :max-count="1" />
      </div>
      <div class="mine-head-right">
        <p class="login" @click="gotologin">立即登录</p>
        <p class="sort">积分：0</p>
      </div>
    </div>
    <div class="mine-news">
      <van-notice-bar scrollable left-icon="volume-o" text="新上线更稳定的付费快递查询接口" />
    </div>
    <!-- 我的订单 -->
    <p class="grey"></p>
    <div class="mine-order">
      <div class="mine-state">
        <img src="/imgs/dd.png" />我的订单
        <span>&gt;</span>
      </div>
      <div class="mine-no">
        <ul>
          <li>
            <img src="/imgs/payment.png" />
            <p>待付款</p>
          </li>
          <li>
            <img src="/imgs/icon2.png" />
            <p>待付款</p>
          </li>
          <li>
            <img src="/imgs/daishouhuo.png" />
            <p>待付款</p>
          </li>
          <li>
            <img src="/imgs/daipingjia.png" />
            <p>待付款</p>
          </li>
        </ul>
      </div>
    </div>
    <p class="grey"></p>
    <div class="mine-main">
      <ul>
        <li>
          <img src="/imgs/yue.png" />
          <p>我的余额</p>
        </li>
        <li>
          <img src="/imgs/wodekanjia.png" />
          <p>我的砍价</p>
        </li>
        <li>
          <img src="/imgs/liquanhuodong.png" />
          <p>我的礼券</p>
        </li>
        <li>
          <img src="/imgs/shoucang1.png" />
          <p>我的收藏</p>
        </li>
        <li>
          <img src="/imgs/kdizhi.png" />
          <p>我的地址</p>
        </li>
        <li>
          <img src="/imgs/kefu1.png" />
          <p>联系客服</p>
        </li>
      </ul>
    </div>
    <p class="gray"></p>
  </div>
</template>
<script>
  import Vue from 'vue';
  import {
    Uploader
  } from 'vant';

  Vue.use(Uploader);
  export default {
    data() {
      return {
        img: []
      };
    },

    methods: {
      gotologin(){
        this.$router.push(this.$path.LOGIN)
      }
    },
  };
</script>
<style lang="scss" scoped>
  .person {
    text-align: center;
    font-size: 12px;
  }

  .mine-head {

    width: 100%;
    height: 26vh;
    background-color: #c1b18f;
    display: flex;

    .img {
      width: 36%;
      height: 100%;

      // background-color: rgb(152, 222, 135);
      .van-uploader {
        margin-top: 6vh;
        width: 70%;
        height: 40%;

        img {
          border-radius: 50%;
        }

      }
    }

    .mine-head-right {
      width: 64%;
      height: 100%;
      text-align: left;
      color: white;

      .login {
        margin-top: 9vh;
        margin-bottom: 1vh;
        font-size: 3vh;
      }

      .sort {
        width: 23vw;
        height: 4vh;
        line-height: 4vh;
        border-radius: 3vw;
        padding-left: 2vw;
        background-color: #b6a37d;
      }
    }
  }

  .mine-news {
    height: 7vh;
  }

  .grey {
    width: 100%;
    height: 2vh;
    background-color: #f5f5f5;
  }

  .mine-order {
    width: 100%;
    height: 20vh;

    //   background-color: violet;
    .mine-state {
      height: 7vh;
      line-height: 7vh;
      text-align: left;
      border-bottom: 1px solid grey;

      img {
        margin: 0 2vw;
        width: 4vw ;
        height : 2vh ;
      }

      span {
        float: right;
        margin-right: 4vw;
      }
    }

    .mine-no {
      width: 100%;
      height: 13vh;

      ul {
        display: flex;
        height: 100%;

        li {
          width: 25%;
          height: 100%;
          text-align: center;

          img {
            margin: 1vh 0;
            width: 30%;
          }
        }
      }
    }
  }

  .mine-main {
    width: 100%;
    height: 25vh;

    //   background-color: indianred;
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-around;

      li {
        width: 33%;
        height: 50%;
        margin: 1vh 0;

        img {
          width: 25%;
          height: 50%;
          margin: 1vh 0;
        }
      }
    }
  }

  .gray {
    width: 100%;
    height: 3vh;
    background-color: #f5f5f5;
    color: #6D6D6D;
  }
</style>